<template>
  <div>
    <el-container>
      <el-header style="background-color: #303133;height: 90px">
        <img src="@/assets/logo1.png" alt="软约评分系统" @click="show()"
          style="width: 55px;position: relative;top: 16px;left: 3px">
        <span
          style="font-size: 20px;margin-left: 15px;color: white;position: relative;bottom: 6px;font-weight: bold">软约评分系统</span>
        <el-dropdown style="float: right;height: 80px;line-height: 80px;">
          <span class="el-dropdown-link" style="color: white;font-size: 17px;">{{ /* user.judUsername */ }}<i
              class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="loginout">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
    </el-container>
    <el-container>
      <el-aside style="overflow: hidden;min-height: 100vh;background-color: #606266;width: 200px">
        <el-menu default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen"
          @close="handleClose" background-color="#606266" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="/layout">
            <i class="el-icon-menu"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/judge">用户信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/ruanyue">活动管理</el-menu-item>
              <el-menu-item index="/player">选手管理</el-menu-item>
              <!-- <el-menu-item index="/match">选手页面</el-menu-item> -->
              <el-menu-item index="/record">评分记录</el-menu-item>
              <el-menu-item @click="oreder()">选手排行榜</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--  <el-menu-item index="/bsscore">评分管理</el-menu-item>
          <el-menu-item index="/pwscore" >
            <i class="el-icon-location"></i>
            <span slot="title">打分大屏</span>
          </el-menu-item>
           <el-menu-item index="/xsscore" >
            <i class="el-icon-location"></i>
            <span slot="title">打分大屏</span>
          </el-menu-item> -->
          <!--          <el-menu-item index="3" disabled>
                      <i class="el-icon-document"></i>
                      <span slot="title">导航三</span>
                    </el-menu-item>-->
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>

  </div>
</template>


<script>
export default {
  name: "Layout",
  data() {
    return {
      user: localStorage.getItem("user")
    }
  },
  methods: {
    oreder() {
      /* window.open("/PwYeMian/排行榜1.html") */
      window.location.href = "/ShowScore/Orderby.html";
    },
    show() {
      this.$router.push("/show");
    },
    loginout() {
      localStorage.removeItem("user");
      // this.$router.push("/");
      location.href = "/";
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}

</script>

<style>
.el-menu {
  border-right: none !important;
  /*不显示，失效*/
}
</style>